<template>
  <div id="myChart"></div>
</template>

<script>
  import axios from 'axios';

  export default {
    name: "RoadHeat",
    mounted: function () {
      const that = this;
      this.getData();
    },
    methods:{
      getData(){
        const that=this;
        const loading = this.$loading({
          lock: true,
          text: '计算热力数据',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        axios.get("http://localhost:8089/try/car").then(function (result) {
          if(result.data.length>0){
            let data=result.data;

            let points=[];

            for (let i = 0; i < data.length; i++) {
              points.push([data[i].lng,data[i].lat])

            }
            that.showChart(points);
          }

        }).catch(function (err) {
          console.log(err)
        }).finally(function () {
          loading.close();
        })
      },
      showChart(data){
        console.log(data);
        let myChart = echarts.init(document.getElementById('myChart'));
        myChart.setOption( {
            animation: false,
            bmap: {
              center: [116.46, 39.92],
              zoom: 10,
              roam: true,
              mapStyle:{
                styleJson: [
                  {
                    'featureType': 'land',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#081734'
                    }
                  },
                  {
                    'featureType': 'building',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#04406F'
                    }
                  },
                  {
                    'featureType': 'building',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'highway',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#015B99'
                    }
                  },
                  {
                    'featureType': 'highway',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'arterial',
                    'elementType': 'geometry',
                    'stylers': {
                      'color':'#003051'
                    }
                  },
                  {
                    'featureType': 'arterial',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'green',
                    'elementType': 'geometry',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'water',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#044161'
                    }
                  },
                  {
                    'featureType': 'subway',
                    'elementType': 'geometry.stroke',
                    'stylers': {
                      'color': '#003051'
                    }
                  },
                  {
                    'featureType': 'subway',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'railway',
                    'elementType': 'geometry',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'railway',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'all',
                    'elementType': 'labels.text.stroke',
                    'stylers': {
                      'color': '#313131'
                    }
                  },
                  {
                    'featureType': 'all',
                    'elementType': 'labels.text.fill',
                    'stylers': {
                      'color': '#FFFFFF'
                    }
                  },
                  {
                    'featureType': 'manmade',
                    'elementType': 'geometry',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'manmade',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'local',
                    'elementType': 'geometry',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'local',
                    'elementType': 'labels',
                    'stylers': {
                      'visibility': 'off'
                    }
                  },
                  {
                    'featureType': 'subway',
                    'elementType': 'geometry',
                    'stylers': {
                      'lightness': -65
                    }
                  },
                  {
                    'featureType': 'railway',
                    'elementType': 'all',
                    'stylers': {
                      'lightness': -40
                    }
                  },
                  {
                    'featureType': 'boundary',
                    'elementType': 'geometry',
                    'stylers': {
                      'color': '#8b8787',
                      'weight': '1',
                      'lightness': -29
                    }
                  }
                ]
              }
            },
            visualMap: {
              show: false,
              top: 'top',
              min: 0,
              max: 5,
              seriesIndex: 0,
              calculable: true,
              inRange: {
                color: ['blue', 'blue', 'green', 'yellow', 'red']
              }
            },
            series: [{
              type: 'heatmap',
              coordinateSystem: 'bmap',
              data: data,
              pointSize: 5,
              blurSize: 6
            }]
        });
        let bmap = myChart.getModel().getComponent('bmap').getBMap();
        bmap.addControl(new BMap.MapTypeControl());
      },
    }
  }
</script>

<style scoped>

</style>
